<template>
  <div>
    <Divider>表单</Divider>
    <ShForm
      ref="ShFormRefs"
      :model="formModel"
      :configs="configs"
      @onCreated="onCreated"
      :openUpdate="true"
      @save-ref="saveRef"
    >
      <template #labelSlot> 表单title自定义 </template>
      <template #checkSlotName> 自定义所有 </template>
      <template #checkSlot> 自定义label之外的东西 </template>
    </ShForm>
    <Button @click="addDate">添加日期</Button>
    <Button @click="submit">提交</Button>
  </div>
</template>

<script setup>
import { reactive, watch, ref, unref, onMounted } from 'vue';

const ShFormRef = ref('');
const ShFormRefs = ref(null);
const formModel = reactive({
  checkbox: ['1'],
  radio: '1',
  input: '',
  select: '1',
  datePicker: ['2023-04-18', '2023-04-21'],
  datePicker3: '',
  textarea: '',
  amount: '23333',
  area: ['beijing', 'gugong'],
});

const getOptions = () => {
  return [
    {
      value: 'beijing',
      label: '北京',
      children: [
        {
          value: 'gugong',
          label: '故宫',
        },
        {
          value: 'tiantan',
          label: '天坛',
        },
        {
          value: 'wangfujing',
          label: '王府井',
        },
      ],
    },
    {
      value: 'jiangsu',
      label: '江苏',
      children: [
        {
          value: 'nanjing',
          label: '南京',
          children: [
            {
              value: 'fuzimiao',
              label: '夫子庙',
            },
          ],
        },
        {
          value: 'suzhou',
          label: '苏州',
          children: [
            {
              value: 'zhuozhengyuan',
              label: '拙政园',
            },
            {
              value: 'shizilin',
              label: '狮子林',
            },
          ],
        },
      ],
    },
  ];
};

const configs = reactive([
  {
    label: '表单',
    labelSlot: 'labelSlot',
    list: [
      {
        slot: 'checkSlotName',
        col: {
          span: 18,
        },
      },
      {
        label: '合作方类型',
        type: 'select',
        key: 'select',
        required: true,
        update: false,
        oldValue: '2',
        options: [
          { name: '停拨电话', value: '1' },
          { name: '停拨客户', value: '2' },
        ],
        filterable: true,
        col: {
          span: 18,
        },
      },
      {
        label: '合作方类型是你',
        itemSlot: 'checkSlot',
        col: {
          span: 18,
        },
      },
      {
        label: '合作方类型',
        type: 'select',
        key: 'select',
        readonly: true,
        options: [
          { name: '停拨电话', value: '1' },
          { name: '停拨客户', value: '2' },
        ],
        col: {
          span: 18,
        },
      },
      {
        label: '字典项select',
        type: 'select',
        key: 'selectDict',
        readonly: true,
        dictCode: 'DB:finance_item',
        col: {
          span: 18,
        },
      },
      {
        label: '日期',
        type: 'datePicker',
        key: 'datePicker',
        hidden: true,
        col: {
          span: 18,
        },
      },
      {
        label: 'checkbox',
        type: 'checkbox',
        key: 'checkbox',
        options: [
          { name: '永久屏蔽', value: '1' },
          { name: '屏蔽', value: '2' },
        ],
        col: { span: 18 },
      },
      {
        label: 'radio',
        type: 'radio',
        key: 'radio',
        options: [
          { name: '永久屏蔽', value: '1' },
          { name: '屏蔽', value: '2' },
        ],
        // disabled: true,
        col: { span: 18 },
      },
      {
        label: 'textarea',
        type: 'input',
        key: 'textarea',
        inputType: 'textarea',
        maxlength: '100',
        showWordLimit: true,
        required: true,
        update: true,
        col: { span: 18 },
      },
      {
        type: 'input',
        label: '输入框',
        key: 'input',
        readonly: false,
        col: { span: 18 },
      },
      {
        type: 'input',
        inputType: 'inputnumber',
        label: '年龄',
        key: 'age',
        col: { span: 18 },
      },
      {
        label: '数字',
        type: 'input',
        key: 'amount',
        inputType: 'inputnumber',
      },
    ],
  },
  {
    row: {
      gutter: 16,
    },
    list: [
      {
        label: '日期',
        type: 'datePicker',
        key: 'datePicker2',
        col: {
          span: 6,
        },
      },
      {
        label: '日期',
        type: 'datePicker',
        pickerType: 'date',
        key: 'datePicker3',
        readonly: true,
        col: {
          span: 6,
        },
      },
      {
        label: '省市区',
        type: 'cascader',
        key: 'area',
        readonly: false,
        required: true,
          update: true,
        options: getOptions(),
      },
    ],
  },
]);

const addDate = () => {
  configs[0].list[4].hidden = false;
};

const onCreated = values => {
  console.log(values);
};

const saveRef = e => {
  ShFormRef.value = e.value;
};

const submit = () => {
  ShFormRef.value.validate();
  console.log(unref(ShFormRefs).getFilesValue(), 'formModel');
};

watch(formModel, values => {
  console.log('formModel: ', values);
});

const setValue = () => {
  unref(ShFormRefs).setFilesValue({
    input: '222',
    select: '1',
  });
};
onMounted(() => {
  unref(ShFormRefs).setFilesValue({
    select: '',
  });
  setValue();
});
</script>
